<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="partner h100p" :style="globalData.appStyle.mainStyle">
    <view :style="globalData.appStyle.navStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" backgroundColor="#FF7C00" color="#FFFFFF" title="成为合伙人" left-icon="left" @clickLeft="back" />
    </view>
    <view class="contentBox" :style="globalData.appStyle.contentStyle">
      <view class="contentWithFooter" :style="contentWithFooterStyle">
        <view v-if="formData.auditStatus === '3'" class="titleBox flc">
          <view class="title cYE f16 bold">审核中...</view>
          <view class="content cGY2 f16">您提交的信息正在审核中，请耐心等待</view>
        </view>
        <view v-if="formData.auditStatus === '2'" class="titleBox flr">
          <view class="titleLeft flc">
            <view class="title cRD f16 bold">未通过</view>
            <view class="content cGY2 f16">{{ formData.auditReason || '' }}</view>
          </view>
          <view class="titleRight fle flcv">
            <view class="contrctService">联系客服</view>
          </view>
        </view>
        <view class="common_form" :class="{ formNoBorder: !formData.auditStatus || formData.auditStatus === '1' }">
          <uni-forms ref="form" :modelValue="formData" class="">
            <view class="need_style">
              <view class="flr fla flb">
                <text class="headerTitle">申请信息</text>
              </view>
              <view class="need_desc">
                <textarea placeholder="请输入申请成为合伙人的缘由和申请资料，例如我有20个采购群，特此申请成为合伙人，截图如下" v-model="formData.applyMaterials" maxlength="150" placeholder-style="color: #808080;font-size:16px;"></textarea>
                <text>{{ formData.applyMaterials.length || 0 }}/150</text>
              </view>
            </view>
            <view class="content_line"></view>
            <UploadFile uploadFileType="img" :picsUrl="formData.materialsPic" title="资料上传" :limit="1" @setFileInfo="getImgUrl" />
          </uni-forms>
        </view>
      </view>
      <FixedBottomBtn v-if="showFixedBottom" @btnFun="submit" />
    </view>
  </view>
</template>
<script>
import commonMxins from '@/mixins/common.js';
const api = require('@/utils/request.js');
import UploadFile from '@/component/UploadFile.vue';
import FixedBottomBtn from '@/component/FixedBottomBtn.vue';
export default {
  mixins: [commonMxins],
  data() {
    return {
      showFixedBottom: true,
      formData: {
        applyMaterials: '',
        materialsPic: ''
      }
    };
  },
  components: { UploadFile, FixedBottomBtn },
  onLoad() {
    this.getPartnerInfo();
  },
  methods: {
    onShareAppMessage(res) {
      return { title: 'E商机-商机触手可得', path: `/pages/procurementPage?shareId=${this.globalData.userInfo.id}` };
    },
    onShareTimeline(res) {
      return { title: 'E商机-商机触手可得', path: '/pages/procurementPage' };
    },
    async getPartnerInfo() {
      let res = await api.request({ url: '/appUser/queryPartnerInfo', method: 'GET' });
      if (res.data) {
        this.formData = { ...res.data };
      }
      this.showFixedBottom = !this.formData.auditStatus || this.formData.auditStatus === '2';
    },
    async submit() {
      this.$refs.form
        .validateField(['applyMaterials', 'materialsPic'])
        .then(async res => {
          let resp = await api.request({ url: '/appUser/submitPartnerApply', data: { ...this.formData } });
          if (resp.code === 200) {
            uni.showToast({ title: '提交成功', icon: 'success', duration: 1500 });
            this.getPartnerInfo();
          }
        })
        .catch(err => {
          console.log(222, err);
        });
    },
    getImgUrl(val) {
      this.formData.materialsPic = val;
    }
  }
};
</script>
<style lang="scss" scoped>
.partner {
  .contentBox {
    position: relative;
    .contentWithFooter {
      .titleBox {
        padding: 12rem;
        box-sizing: border-box;
        .titleLeft {
          width: 300rem;
        }
        .titleRight {
          width: calc(100% - 300rem);
          .contrctService {
            width: 88rem;
            height: 32rem;
            font-size: 14rem;
            text-align: center;
            line-height: 32rem;
            border-radius: 50rem;
            border: 1rem solid rgba(255, 124, 0, 1);
            color: rgba(255, 124, 0, 1);
          }
        }
        .title {
          line-height: 24rem;
        }
        .content {
          line-height: 24rem;
        }
      }
      .common_form /deep/ {
        .uni-forms {
          border-top: 1rem solid #ff7c00;
          border-top-left-radius: 20rem;
          border-top-right-radius: 20rem;
        }
        .uni-forms-item {
          width: 402rem;
          padding: 0 14rem;
          height: 60rem;
          margin-bottom: 0;
        }
        .uni-forms-item__label {
          height: 60rem !important;
          font-size: 16rem !important;
          color: rgba(56, 56, 56, 1) !important;
          text-align: left;
          line-height: 60rem !important;
        }
        .uni-forms-item__content {
          input {
            height: 60rem;
            width: calc(100% - 50rem);
          }
          .uni-icons {
            color: rgba(166, 166, 166, 1) !important;
          }
          text {
            font-size: 14rem;
            font-weight: 400;
            color: rgba(166, 166, 166, 1);
          }
        }
      }
      .formNoBorder /deep/ {
        .uni-forms {
          border-top: none;
        }
      }
    }
    .need_style {
      width: 402rem;
      padding: 12rem 14rem 10rem 14rem;
      .headerTitle {
        color: #383838;
        font-size: 18rem;
        font-weight: bold;
      }
      .need_desc_label {
        font-size: 14rem;
        font-weight: 400;
        line-height: 45rem;
        color: rgba(56, 56, 56, 1);
      }
      .need_desc {
        position: relative;
        width: 372rem;
        height: 155rem;
        margin-top: 12rem;
        padding: 10rem 15rem 0 15rem;
        border-radius: 10rem;
        background: rgba(255, 251, 247, 1);
        textarea {
          width: 100%;
          height: 100%;
          font-size: 16rem;
        }
        text {
          position: absolute;
          bottom: 6rem;
          right: 6rem;
          font-size: 14rem;
          font-weight: 400;
          color: rgba(166, 166, 166, 1);
        }
      }
      .img_desc_label {
        font-size: 12rem;
        font-weight: 400;
        color: rgba(166, 166, 166, 1);
        padding-left: 6rem;
      }
      .upload_input {
        width: 316rem;
        padding: 0 10rem;
        height: 26rem;
        opacity: 1;
        border-radius: 2rem;
        border: 0.6rem solid rgba(229, 229, 229, 1);
        text {
          font-size: 10rem;
          font-weight: 400;
          color: rgba(166, 166, 166, 1);
          text-align: left;
        }
      }
    }
    // 表单间距下划线
    .content_line {
      width: 430rem;
      height: 0rem;
      border-top: 1rem solid rgba(229, 229, 229, 1);
    }
    .footerBox {
      width: 100%;
      padding: 12rem;
      box-sizing: border-box;
      height: 66rem;
      position: absolute;
      bottom: 0;
      left: 0;
      .footer {
        width: calc(100% - 24rem);
        padding: 12rem;
        height: 44rem;
        box-sizing: border-box;
        background: #ff7c00;
        color: #ffffff;
        font-size: 16rem;
        line-height: 24rem;
        margin: 0 auto;
        text-align: center;
        border-radius: 50rem;
      }
    }
  }
}
</style>
